<template>
  <div>
    <DialogVue :title="'添加图标'" v-bind="$attrs">
      <div class="container">
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <FormMain @submit-event="formSubmitevent"></FormMain></div
          ></el-col>

          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <DialogEditRight></DialogEditRight></div
          ></el-col>
        </el-row>
      </div>
    </DialogVue>
  </div>
</template>

<script setup lang="ts">
import DialogVue from './DialogVue.vue'
import FormVue from '../form/FormVue.vue'
import DialogEditRight from './DialogEditRight.vue'
import FormMain from '../form/FormMain.vue'
import emitter from '../../../mitt'
import store from '../../../store'
import { onBeforeUnmount } from 'vue'
console.log(onBeforeUnmount)
console.log(emitter)

const formSubmitevent = (newAppInfo) => {
  let count = store.getAppListCount()
  console.log('创建新的图标', { id: count, ...newAppInfo })
  store.addApp(
    {
      id: count,
      webName: newAppInfo.webName,
      webUrl: newAppInfo.webUrl,
      icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    },
    count
  )
  console.log('添加后的最新list', store.appList)
}
</script>

<style scoped>
.container {
  border: 1px dashed;
}
/* .bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
} */
</style>
